<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海洋数据统计分析系统</title>
    <!-- Vue.js (using cdnjs) -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script> -->
    <!-- Element UI CSS -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.8/theme-chalk/index.css"> -->
    <!-- Element UI JS -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.8/index.js"></script> -->
    <!-- ECharts -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script> -->

    <!-- Vue.js (from node_modules) -->
    <script src="../../../static/rwpgrw/node_modules/vue/dist/vue.min.js"></script>
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="../../../static/rwpgrw/node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- Element UI JS -->
    <script src="../../../static/rwpgrw/node_modules/element-ui/lib/index.js"></script>
    <!-- ECharts -->
    <script src="../../../static/rwpgrw/node_modules/echarts/dist/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .filter-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
        }
        .chart-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
        }
        .chart {
            width: 100%;
            height: 400px;
        }
        .btn-search {
            margin-left: 20px;
        }
        .el-card {
            margin-bottom: 20px;
        }
    </style>
    <!-- 引入工具类脚本 -->
    <script src="../../../static/rwpgrw/rwtjutils.js"></script>
</head>
<body>
<div id="app">
    <!-- 筛选条件区域 -->
    <div class="filter-container">
        <el-form inline label-position="right">
            <el-form-item label="海区">
                <el-select v-model="selectedArea" placeholder="请选择海区" multiple collapse-tags collapse-tags-tooltip @change="handleAreaChange">
                    <el-option
                            v-for="item in areaOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        <span style="float: left;">{{ item.label }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px;">{{ item.range }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="统计指标">
                <el-select v-model="selectedIndex" placeholder="请选择统计指标" @change="handleSearch" :disabled="selectedChart === 'candlestick'">
                    <el-option
                            v-for="item in indexOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="统计图">
                <el-select v-model="selectedChart" placeholder="请选择统计图类型" @change="handleChartTypeChange">
                    <el-option label="变化折线图" value="line"></el-option>
                    <el-option label="箱线图" value="candlestick"></el-option>
                    <el-option label="散点图" value="scatter"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="float: right;">
                <el-button type="primary" @click="handleSearch">
                    <i class="el-icon-refresh"></i> 统计
                </el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 标签页区域 -->
    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleTabClick">
        <el-tab-pane label="数据表格" name="table">
            <el-table :data="paginatedTableData" style="width: 100%">
                <el-table-column prop="time" label="时间" width="180"></el-table-column>
                <el-table-column prop="value" :label="currentIndexLabel" width="180"></el-table-column>
                <el-table-column prop="area" label="海区" width="180"></el-table-column>
                <el-table-column prop="description" label="说明"></el-table-column>
            </el-table>
            <div style="margin-top: 15px; text-align: right;">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="tableData.length"
                        :page-size="pageSize"
                        :current-page.sync="currentPage"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </el-tab-pane>
        <el-tab-pane label="统计图" name="chart">
            <div class="chart-container">
                <div id="chart" class="chart"></div>
            </div>
        </el-tab-pane>
    </el-tabs>
</div>

<script>
    /**
     * 海洋数据统计分析系统主应用
     * 演示如何使用工具类：
     * 1. TableUtils - 表格数据处理工具类
     * 2. ChartUtils - 图表生成和更新工具类
     * 3. DataFormatter - 数据格式化工具类
     */
    new Vue({
        el: '#app',
        data() {
            return {
                // 筛选条件
                selectedArea: ['中国近海'],
                selectedIndex: 'bias',
                selectedChart: 'line',
                // 用于触发表格更新的响应式属性
                tableDataChanged: 0,
                // 当前激活的标签页
                activeTab: 'table',
                // 海区选项
                areaOptions: [
                    { label: '中国近海', value: '中国近海', range: '14°N～42°′N，105°E～132°E' },
                    { label: '渤海', value: '渤海', range: '37°N～41°N，117°E～122°E' },
                    { label: '黄海', value: '黄海', range: '31°N～40°N，119°E～127°E' },
                    { label: '东海', value: '东海', range: '21°N～33°N，117°E～131°E' },
                    { label: '南海', value: '南海', range: '14°N～23°N，99°E～122°E' }
                ],
                // 统计指标选项
                indexOptions: [
                    { label: '偏差', value: 'bias' },
                    { label: '均方根误差', value: 'rmse' },
                    { label: '分组均方根', value: 'group_rmse' },
                    { label: '平均绝对误差', value: 'mae' },
                    { label: '相对误差', value: 'relative_error' },
                    { label: '相关系数', value: 'correlation' },
                    { label: '标准差', value: 'std' },
                    { label: '准确率', value: 'accuracy' }
                ],
                // 模拟数据 - 为每个海区创建独立的数据
                mockData: {
                    time: ['24h', '48h', '72h', '96h', '120h', '144h', '168h'],
                    '中国近海': {
                        bias: [-0.25, -0.27, -0.29, -0.31, -0.33, -0.35, -0.38],
                        rmse: [0.4, 0.42, 0.45, 0.48, 0.51, 0.54, 0.57],
                        mae: [0.3, 0.32, 0.34, 0.36, 0.38, 0.4, 0.42],
                        relative_error: [0.15, 0.16, 0.17, 0.18, 0.19, 0.2, 0.21],
                        correlation: [0.85, 0.84, 0.83, 0.82, 0.81, 0.8, 0.79],
                        std: [0.35, 0.36, 0.37, 0.38, 0.39, 0.4, 0.41],
                        accuracy: [0.8, 0.79, 0.78, 0.77, 0.76, 0.75, 0.74],
                        group_rmse: [0.45, 0.46, 0.47, 0.48, 0.49, 0.5, 0.51],
                        // 箱线图统计值 - 每个时间点使用不同的随机值
                        min: [14.8, 15.1, 15.3, 15.0, 14.9, 15.2, 15.4],      // 最小值
                        q1: [15.7, 16.1, 16.3, 15.9, 16.0, 16.2, 15.8],       // 第一四分位数
                        median: [17.2, 17.6, 17.4, 17.7, 17.3, 17.5, 17.8],   // 中位数
                        q3: [18.3, 18.7, 18.5, 18.8, 18.4, 18.6, 18.9],       // 第三四分位数
                        max: [18.8, 19.2, 19.0, 19.3, 18.9, 19.1, 19.4]       // 最大值
                    },
                    '渤海': {
                        bias: [-0.18, -0.21, -0.24, -0.26, -0.29, -0.31, -0.34],
                        rmse: [0.32, 0.35, 0.38, 0.41, 0.44, 0.47, 0.5],
                        mae: [0.23, 0.26, 0.29, 0.31, 0.34, 0.36, 0.39],
                        relative_error: [0.12, 0.13, 0.14, 0.15, 0.16, 0.17, 0.18],
                        correlation: [0.88, 0.87, 0.86, 0.85, 0.84, 0.83, 0.82],
                        std: [0.28, 0.3, 0.32, 0.34, 0.36, 0.38, 0.4],
                        accuracy: [0.83, 0.82, 0.81, 0.8, 0.79, 0.78, 0.77],
                        group_rmse: [0.38, 0.4, 0.42, 0.44, 0.46, 0.48, 0.5],
                        // 箱线图统计值 - 每个时间点使用不同的随机值
                        min: [14.7, 15.0, 15.2, 14.9, 15.1, 14.8, 15.3],      // 最小值
                        q1: [15.6, 16.0, 16.2, 15.8, 15.9, 16.1, 15.7],       // 第一四分位数
                        median: [17.1, 17.5, 17.3, 17.6, 17.2, 17.4, 17.7],   // 中位数
                        q3: [18.2, 18.6, 18.4, 18.7, 18.3, 18.5, 18.8],       // 第三四分位数
                        max: [18.7, 19.1, 18.9, 19.2, 18.8, 19.0, 19.3]       // 最大值
                    },
                    '黄海': {
                        bias: [-0.31, -0.34, -0.36, -0.39, -0.42, -0.45, -0.48],
                        rmse: [0.46, 0.49, 0.52, 0.55, 0.58, 0.61, 0.64],
                        mae: [0.36, 0.39, 0.42, 0.45, 0.48, 0.51, 0.54],
                        relative_error: [0.18, 0.19, 0.2, 0.21, 0.22, 0.23, 0.24],
                        correlation: [0.82, 0.81, 0.8, 0.79, 0.78, 0.77, 0.76],
                        std: [0.41, 0.43, 0.45, 0.47, 0.49, 0.51, 0.53],
                        accuracy: [0.77, 0.76, 0.75, 0.74, 0.73, 0.72, 0.71],
                        group_rmse: [0.51, 0.53, 0.55, 0.57, 0.59, 0.61, 0.63],
                        // 箱线图统计值 - 每个时间点使用不同的随机值
                        min: [14.9, 15.2, 15.4, 15.1, 15.0, 15.3, 15.5],      // 最小值
                        q1: [15.8, 16.2, 16.4, 16.0, 16.1, 16.3, 15.9],       // 第一四分位数
                        median: [17.3, 17.7, 17.5, 17.8, 17.4, 17.6, 17.9],   // 中位数
                        q3: [18.4, 18.8, 18.6, 18.9, 18.5, 18.7, 19.0],       // 第三四分位数
                        max: [18.9, 19.3, 19.1, 19.4, 19.0, 19.2, 19.5]       // 最大值
                    },
                    '东海': {
                        bias: [-0.29, -0.32, -0.35, -0.38, -0.41, -0.44, -0.47],
                        rmse: [0.44, 0.47, 0.5, 0.53, 0.56, 0.59, 0.62],
                        mae: [0.34, 0.37, 0.4, 0.43, 0.46, 0.49, 0.52],
                        relative_error: [0.17, 0.18, 0.19, 0.2, 0.21, 0.22, 0.23],
                        correlation: [0.83, 0.82, 0.81, 0.8, 0.79, 0.78, 0.77],
                        std: [0.39, 0.41, 0.43, 0.45, 0.47, 0.49, 0.51],
                        accuracy: [0.78, 0.77, 0.76, 0.75, 0.74, 0.73, 0.72],
                        group_rmse: [0.49, 0.51, 0.53, 0.55, 0.57, 0.59, 0.61],
                        // 箱线图统计值 - 每个时间点使用不同的随机值
                        min: [14.6, 14.9, 15.1, 14.8, 15.0, 14.7, 15.2],      // 最小值
                        q1: [15.5, 15.9, 16.1, 15.7, 15.8, 16.0, 15.6],       // 第一四分位数
                        median: [17.0, 17.4, 17.2, 17.5, 17.1, 17.3, 17.6],   // 中位数
                        q3: [18.1, 18.5, 18.3, 18.6, 18.2, 18.4, 18.7],       // 第三四分位数
                        max: [18.6, 19.0, 18.8, 19.1, 18.7, 18.9, 19.2]       // 最大值
                    },
                    '南海': {
                        bias: [-0.22, -0.24, -0.26, -0.28, -0.3, -0.32, -0.34],
                        rmse: [0.37, 0.39, 0.42, 0.45, 0.48, 0.51, 0.54],
                        mae: [0.27, 0.29, 0.31, 0.33, 0.35, 0.37, 0.39],
                        relative_error: [0.14, 0.15, 0.16, 0.17, 0.18, 0.19, 0.2],
                        correlation: [0.86, 0.85, 0.84, 0.83, 0.82, 0.81, 0.8],
                        std: [0.33, 0.35, 0.37, 0.39, 0.41, 0.43, 0.45],
                        accuracy: [0.81, 0.8, 0.79, 0.78, 0.77, 0.76, 0.75],
                        group_rmse: [0.42, 0.44, 0.46, 0.48, 0.5, 0.52, 0.54],
                        // 箱线图统计值 - 每个时间点使用不同的随机值
                        min: [15.0, 15.3, 15.5, 15.2, 15.1, 15.4, 15.6],      // 最小值
                        q1: [15.9, 16.3, 16.5, 16.1, 16.2, 16.4, 16.0],       // 第一四分位数
                        median: [17.4, 17.8, 17.6, 17.9, 17.5, 17.7, 18.0],   // 中位数
                        q3: [18.5, 18.9, 18.7, 19.0, 18.6, 18.8, 19.1],       // 第三四分位数
                        max: [19.0, 19.4, 19.2, 19.5, 19.1, 19.3, 19.6]       // 最大值
                    }
                },
                // 工具类实例
                tableUtils: null,
                chartUtils: null,
                // 表格数据
                tableData: [],
                // 分页参数
                pageSize: 7, // 与TableUtils中的默认值保持一致
                currentPage: 1
            };
        },
        computed: {
            // 当前选中的指标名称
            currentIndexLabel() {
                /**
                 * 调用DataFormatter工具类的静态方法
                 * @param {Array} indexOptions - 指标选项数组，每项包含label和value属性
                 * @param {string} indexValue - 当前选中的指标值
                 * @returns {string} 对应的指标标签
                 */
                return DataFormatter.getIndexLabel(this.indexOptions, this.selectedIndex);
            },
            // 分页后的数据
            paginatedTableData() {
                // 引用tableDataChanged以确保Vue能检测到数据变化
                this.tableDataChanged;
                /**
                 * 调用TableUtils实例的getPaginatedData方法
                 * @returns {Array} 分页后的表格数据数组
                 */
                return this.tableUtils ? this.tableUtils.getPaginatedData() : [];
            }
        },
        mounted() {
            // 初始化工具类
            this.initUtils();
            // 初始加载数据
            this.updateData();
        },
        methods: {
            // 初始化工具类
            initUtils() {
                /**
                 * TableUtils构造函数参数说明：
                 * @param {Object} options - 配置对象
                 * @param {Array} options.data - 可选，初始数据数组
                 * @param {number} options.pageSize - 可选，每页显示条数，默认3
                 * @param {Function} options.formatter - 可选，自定义数据格式化函数
                 */
                this.tableUtils = new TableUtils({
                    pageSize: 7 // 设置每页显示10条数据
                });

                /**
                 * ChartUtils构造函数参数说明：
                 * @param {string} containerId - 图表容器DOM元素ID
                 * @param {Object} options - 配置对象
                 * @param {string} options.chartType - 可选，图表类型(line/candlestick/scatter)，默认line
                 * @param {boolean} options.responsive - 可选，是否响应式，默认true
                 */
                this.chartUtils = new ChartUtils('chart', {
                    chartType: this.selectedChart, // 设置默认图表类型
                    responsive: true // 启用响应式调整
                });
            },
            // 处理搜索
            handleSearch() {
                this.updateData();
            },
            // 处理图表类型变化
            handleChartTypeChange() {
                // 当切换到箱线图时，固定统计指标为偏差
                if (this.selectedChart === 'candlestick') {
                    this.selectedIndex = 'bias';
                }
                // 执行搜索更新数据
                this.handleSearch();
            },
            // 处理标签页切换
            handleTabClick(tab) {
                if (tab.name === 'chart') {
                    // 确保图表实例存在
                    if (!this.chartUtils) {
                        this.initUtils();
                    }
                    // 强制重新渲染图表
                    setTimeout(() => {
                        /**
                         * 调用ChartUtils实例的resize方法重新计算图表大小
                         * 无参数，无返回值
                         */
                        this.chartUtils.resize();
                        this.updateChart();
                    }, 100);
                }
            },
            // 处理分页变化
            handlePageChange(page) {
                if (this.tableUtils) {
                    /**
                     * 调用TableUtils实例的changePage方法
                     * @param {number} page - 页码
                     * 无返回值
                     */
                    this.tableUtils.changePage(page);
                    // 更新Vue实例中的currentPage，确保双向同步
                    this.currentPage = page;
                    // 触发表格重新渲染
                    this.tableDataChanged++;
                }
            },
            // 处理海区选择变化，确保至少有一个选中项并更新数据
            handleAreaChange(value) {
                if (!value || value.length === 0) {
                    // 如果没有选中项，默认选择第一个海区
                    this.selectedArea = ['中国近海'];
                }
                // 调用更新数据方法，刷新表格和图表
                this.updateData();
            },
            // 更新数据
            updateData() {
                this.updateTableData();
                this.updateChart();
            },
            // 更新表格数据
            updateTableData() {
                if (!this.tableUtils) return;

                const indexLabel = this.currentIndexLabel;

                // 处理多选海区
                let tableData = [];
                const areas = Array.isArray(this.selectedArea) ? this.selectedArea : [this.selectedArea];

                // 为了调试，先清空数组再添加数据
                tableData = [];

                areas.forEach(area => {
                    // 获取该海区特定指标的数据
                    const values = this.mockData[area][this.selectedIndex];

                    /**
                     * 调用DataFormatter.formatTableData静态方法格式化数据
                     * @param {Array} timeData - 时间数据数组，如['24h', '48h', ...]
                     * @param {Array} valueData - 数值数据数组，与时间数据一一对应
                     * @param {string} area - 海区名称
                     * @param {string} description - 描述信息
                     * @returns {Array} 格式化后的表格数据数组，每项包含time、value、area、description字段
                     */
                    const areaTableData = DataFormatter.formatTableData(
                        this.mockData.time,  // 时间数据
                        values,              // 数值数据
                        area,                // 海区名称
                        `${area} - ${indexLabel}统计数据`  // 描述信息
                    );
                    tableData = tableData.concat(areaTableData);
                });

                // 更新Vue实例中的tableData数组，确保分页组件的total属性正确显示
                this.tableData = tableData;

                /**
                 * 调用TableUtils实例的setData方法设置数据
                 * @param {Array} data - 表格数据数组
                 * 无返回值，会重置当前页码为1
                 */
                this.tableUtils.setData(tableData);

                // 更新响应式属性以触发表格重新渲染
                this.tableDataChanged++;
            },
            // 更新图表
            updateChart() {
                // 获取图表容器
                const chartContainer = document.getElementById('chart');
                if (!chartContainer) return; // 确保容器存在

                // 先检查是否为散点图类型
                if (this.selectedChart === 'scatter') {
                    // 对于散点图，先销毁之前的图表实例
                    if (this.chartUtils && this.chartUtils.chartInstance) {
                        try {
                            this.chartUtils.chartInstance.dispose();
                            this.chartUtils.chartInstance = null;
                        } catch (e) {
                            console.warn('销毁图表实例时发生错误:', e);
                        }
                    }

                    // 清空容器并显示散点图文字
                    chartContainer.innerHTML = '<div style="display: flex; justify-content: center; align-items: center; height: 100%; font-size: 18px; color: #333;">散点图</div>';
                    return;
                }

                if (!this.chartUtils) return;

                // 重置图表实例
                if (this.chartUtils.chartInstance) {
                    try {
                        this.chartUtils.chartInstance.dispose();
                        this.chartUtils.chartInstance = null;
                    } catch (e) {
                        console.warn('销毁旧图表实例时发生错误:', e);
                    }
                }

                // 确保容器是空的
                chartContainer.innerHTML = '';

                // 初始化新的图表实例
                try {
                    this.chartUtils.init();
                } catch (e) {
                    console.error('初始化图表失败:', e);
                    return;
                }

                const indexLabel = this.currentIndexLabel;

                // 处理多选海区
                const areas = Array.isArray(this.selectedArea) ? this.selectedArea : [this.selectedArea];
                let seriesData = [];
                let statsData = {}; // 存储每个时间点对应的统计值

                // 根据图表类型处理数据格式
                if (this.selectedChart === 'candlestick') {
                    // 为箱线图为每个选中的海区单独创建数据系列和统计值
                    areas.forEach(area => {
                        // 基础数据
                        const baseData = this.mockData[area][this.selectedIndex];
                        seriesData.push({
                            name: area,
                            data: baseData
                        });

                        // 为每个时间点生成不同的统计值
                        statsData[area] = {
                            min: [],
                            q1: [],
                            median: [],
                            q3: [],
                            max: []
                        };

                        // 检查是否包含固定统计值
                        if (this.mockData[area].min &&
                            this.mockData[area].q1 &&
                            this.mockData[area].median &&
                            this.mockData[area].q3 &&
                            this.mockData[area].max) {
                            // 直接使用mockData中的固定统计值
                            statsData[area] = {
                                min: this.mockData[area].min,
                                q1: this.mockData[area].q1,
                                median: this.mockData[area].median,
                                q3: this.mockData[area].q3,
                                max: this.mockData[area].max
                            };
                        } else {
                            // 为其他海区计算统计值（模拟不同时间点的分布特征）
                            baseData.forEach((value, index) => {
                                // 添加一些随机变化，使每个时间点的统计值不同
                                const variation = (Math.random() - 0.5) * 0.1; // -5% 到 +5% 的变化
                                const baseValue = Math.abs(value); // 确保非负数

                                // 根据当前值和索引生成不同的统计值
                                const minValue = Math.max(0, baseValue * (0.8 + variation));
                                const q1Value = baseValue * (0.9 + variation * 0.5);
                                const medianValue = baseValue * (1.0 + variation * 0.3);
                                const q3Value = baseValue * (1.1 + variation * 0.5);
                                const maxValue = baseValue * (1.2 + variation);

                                // 处理负值情况
                                const finalMin = value < 0 ? -maxValue : minValue;
                                const finalQ1 = value < 0 ? -q3Value : q1Value;
                                const finalMedian = value < 0 ? -medianValue : medianValue;
                                const finalQ3 = value < 0 ? -q1Value : q3Value;
                                const finalMax = value < 0 ? -minValue : maxValue;

                                // 存储统计值
                                statsData[area].min.push(finalMin);
                                statsData[area].q1.push(finalQ1);
                                statsData[area].median.push(finalMedian);
                                statsData[area].q3.push(finalQ3);
                                statsData[area].max.push(finalMax);
                            });
                        }
                    });
                    console.log('箱线图数据:', seriesData);
                    console.log('箱线图统计值:', statsData);
                } else {
                    /*
                     * 折线图数据格式要求：
                     * seriesData: 数组，每个元素为对象，包含：
                     *   - name: 字符串，系列名称（如海区名称）
                     *   - data: 数组，每个元素为数值，对应时间轴上的数据点
                     */
                    // 为折线图创建多系列数据
                    areas.forEach(area => {
                        seriesData.push({
                            name: area,       // 系列名称
                            data: this.mockData[area][this.selectedIndex]  // 对应时间点的数值数组
                        });
                    });
                    console.log('折线图:', seriesData);
                }

                // 生成标题
                const title = areas.length > 1 ? `${areas.join('、')} - ${indexLabel}${this.selectedChart === 'candlestick' ? '箱线图' : '变化折线图'}` : `${areas[0]} - ${indexLabel}${this.selectedChart === 'candlestick' ? '箱线图' : '变化折线图'}`;

                // 更新图表
                if (this.chartUtils.chartInstance) {
                    this._doUpdateChart(seriesData, areas, title, indexLabel, statsData);
                }
            },
            // 实际执行图表更新的方法
            _doUpdateChart(seriesData, areas, title, indexLabel, statsData = {}) {
                if (!this.chartUtils || !this.chartUtils.chartInstance) return;

                try {
                    this.chartUtils.updateChart(
                        // 数据参数
                        {
                            timeData: this.mockData.time,  // 时间轴数据
                            seriesData: seriesData,  // 数据
                            stats: statsData  // 统计值数据（每个时间点对应不同值）
                        },
                        // 配置参数
                        {
                            chartType: this.selectedChart,  // 图表类型
                            area: areas,  // 海区
                            indexLabel: indexLabel,  // 指标标签
                            title: title,  // 自定义标题
                            stats: statsData  // 也可以在配置参数中传递统计值（兼容两种方式）
                        }
                    );
                } catch (e) {
                    console.error('更新图表时发生错误:', e);
                    return;
                }

                // 强制图表重新渲染
                setTimeout(() => {
                    if (this.chartUtils && this.chartUtils.chartInstance) {
                        try {
                            this.chartUtils.chartInstance.resize();
                        } catch (e) {
                            console.warn('调整图表大小时发生错误:', e);
                        }
                    }
                }, 50);
            }
        }
    });
</script>
</body>
</html>